<template>
  <view class="wrap">
    <!-- 	<scroll-view :scroll-y="true" @scrolltolower="loadMore" @scroll="scroll" :scroll-top="scrollTop" :scroll-with-animation="true"> -->
    <view class="home-tab">
      <view :class="['tab-item',index==isIndex?'tab-actived':'']" v-for="(item,index) in tabList" :key="item.id" v-text="item.name" @click="changeTab(index)"></view>
    </view>
    <view
      class="item"
      v-for="(item, idx) in dataList"
      :key="idx"
      @click="todetail(item.id)"
    >
      <view class="info">
        <view class="title">{{ item.title }}</view>
        <image
          v-if="item.good_cover"
          :src="url + item.good_cover"
          mode="widthFix"
        ></image>
        <view class="desc">
          {{ item.sub }}
        </view>
        <view class="join">
          <text>阅读:{{ item.visiter }}</text>
          <text>点赞:{{ item.zan }}</text>
          <text>评论:{{ item.count }}</text>
          <text style="margin-left: auto">{{
            item.created_at.substring(0, 10)
          }}</text>
        </view>
      </view>
    </view>
    <view class="empty" v-if="!loading && !nextStatus && dataList.length == 0">
      <image src="../../../static/no.png" mode="widthFix"></image>
      <text>暂时还没有数据，请等待</text>
    </view>
    <tui-loadmore :visible="loading" :index="2" type="primary"></tui-loadmore>
    <tui-loadmore
      :visible="!loading && nextStatus"
      :index="3"
      type="primary"
    ></tui-loadmore>
    <tui-nomore
      v-if="dataList.length > 0"
      :visible="!nextStatus"
      text="这是我的底线老铁"
    ></tui-nomore>
    <!-- </scroll-view> -->
  </view>
</template>

<script>
import tuiLoadmore from "@/components/loadmore/loadmore";
import tuiNomore from "@/components/nomore/nomore";
export default {
  components: {
    tuiLoadmore,
    tuiNomore,
  },
  data() {
    return {
      dataList: [],
      nextStatus: false,
      loading: true,
      scrollTop: 0,
      page: 1,
      isIndex: 0,
      tabList:[
        {"name": "推荐","id":1},
        {"name": "关注","id":2},
      ],
    };
  },
  methods: {
    changeTab(ind){
      this.isIndex = ind;
    },
    todetail(id) {
      uni.navigateTo({
        url: "../newsDetail/newsDetail?id=" + id,
      });
    },
    scroll(e) {
      //console.log(e.detail.scrollTop);
      this.scrollTop = e.detail.scrollTop;
    },
    scrolltop() {
      this.scrollTop = 0;
    },
    loadMore() {
      if (this.nextStatus) {
        if (!this.loadFlag) {
          this.loadFlag = true;
          this.init(true);
          setTimeout(() => {
            this.loadFlag = false;
          }, 1000);
        }
      }
    },
    async init(refresh = false) {
      let res = {
        data: [],
      };
      res.data = this.$api.Story_list;
      this.loading = false;
      if (res.data.length == 10) {
        this.nextStatus = true;
        this.page += 1;
      } else {
        this.nextStatus = false;
      }
      this.dataList = refresh ? this.dataList.concat(res.data) : res.data;
    },
  },
  onPullDownRefresh() {
    this.dataList = [];
    this.page = 1;
    this.loading = true;
    this.nextStatus = true;
    setTimeout(() => {
      this.init();
      uni.hideNavigationBarLoading();
      // 停止下拉动作
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onReachBottom() {
    this.loadMore();
  },
  onLoad() {
    this.loading = true;
    this.init();
  },
};
</script>

<style lang="less">
.wrap {
  width: 100%;
  min-height: 100vh;
  background: #f8f8f8;
  overflow-x: hidden;
  .home-tab {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background: #3d836d;
    .tab-item {
      color: #fff;
      padding-right: 15px;
      font-size: 14px;
      padding-right: 12px;
    }
    .tab-actived {
      color: #fff;
      font-size: 18px;
    }
  }
  .item {
    width: 100%;
    margin: 10upx auto 0 auto;
    padding: 0 0;
    border-bottom: solid 1upx rgba(0, 0, 0, 0.05);
    background: #fff;
    .info {
      width: 96%;
      margin: 0 auto;
      image {
        width: 100%;
        margin-top: 20upx;
      }
      .title {
        color: #000000;
        font-size: 32upx;
        line-height: 80upx;
        font-weight: bold;
      }
      .time {
        color: #999;
        font-size: 24upx;
      }
      .desc {
        font-size: 28upx;
        color: #333333;
        line-height: 50upx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
      .join {
        font-size: 24upx;
        color: #999;
        display: flex;
        align-items: center;
        padding-bottom: 20upx;
        text-align: right;
        justify-content: flex-start;
        padding-top: 20upx;
        text {
          margin-right: 8upx;
        }
      }
    }
  }
}
</style>
